import React from 'react';
import { LogoHeader } from '../../components/Header';
import SearchBox from '../../components/SearchBox';
import {
  Checkbox,
  Counter,
} from '../../components/Form';

import styles from './index.module.less';

export default class ShoppingCart extends React.Component {
  state = {
    storeGoodsGroup: [
      {
        key: 1,
        storeName: '杭州塑料有限公司',
        goods: [
          {
            key: 100,
            img: 'https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg',
            goodsInfo: '现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max',
            path: '',
            unitPrice: 1300,
            count: 2,
            surplus: 10,
            type: 1,
          },
          {
            key: 101,
            img: 'https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg',
            goodsInfo: '现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max',
            path: '',
            unitPrice: 1300,
            count: 1,
            surplus: 8,
            type: 1,
          },
        ],
      },
    ],
  };

  render() {
    const { storeGoodsGroup } = this.state;

    return (
      <React.Fragment>
        <LogoHeader moduleName='购物车' rightContent={<SearchBox />} />
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.cartTableHead}>
              <div className={`${styles.headText} ${styles.checkAll}`}>
                <div className={styles.checkbox}>
                  <Checkbox />
                </div>
                <span className={styles.text}>全选</span>
              </div>
              <div className={`${styles.headText} ${styles.goodsInfo}`}>商品信息</div>
              <div className={`${styles.headText} ${styles.unitPrice}`}>单价（元）</div>
              <div className={`${styles.headText} ${styles.count}`}>数量</div>
              <div className={`${styles.headText} ${styles.amount}`}>金额</div>
              <div className={`${styles.headText} ${styles.handle}`}>操作</div>
            </div>
            <div className={styles.cartTableBody}>
              {
                storeGoodsGroup.map((store, storeIndex) => {
                  return (
                    <div className={styles.storeGoodsGroup} key={store.key}>
                      <div className={styles.storeName}>
                        <div className={styles.checkbox}>
                          <Checkbox />
                        </div>
                        <span className={styles.text}>店铺：{store.storeName}</span>
                      </div>
                      <div className={styles.storeGoodsList}>
                        {
                          store.goods.map((goodsItem, goodsIndex) => {
                            return (
                              <ul className={styles.goodsItem} key={goodsItem.key}>
                                <li className={styles.checkAll}>
                                  <div className={styles.checkbox}>
                                    <Checkbox />
                                  </div>
                                </li>
                                <li className={styles.goodsInfo}>
                                  <div className={styles.goodsImg}>
                                    <a href={goodsItem.path}>
                                      <img src={goodsItem.img} alt='图片' />
                                      <div className={styles.tipMask}></div>
                                      <div className={styles.tip}>-已售罄-</div>
                                    </a>
                                  </div>
                                  <div className={styles.goodsInfoText}>
                                    <a href={goodsItem.path}>
                                      {goodsItem.goodsInfo}
                                    </a>
                                  </div>
                                  <div className={styles.isIncludeTax}>
                                    是否含税：含税价
                                  </div>
                                </li>
                                <li className={styles.unitPrice}>
                                  {goodsItem.unitPrice}元/吨
                                </li>
                                <li className={styles.count}>
                                  <Counter max={goodsItem.surplus} value={goodsItem.count} />
                                </li>
                                <li className={styles.amount}>
                                  ￥1300.00
                                </li>
                                <li className={styles.handle}>
                                  <div>删除</div>
                                  <div>移入收藏夹</div>
                                </li>
                              </ul>
                            );
                          })
                        }
                      </div>
                    </div>
                  );
                })
              }
            </div>
            <div className={styles.cartTableFoot}>
              <div className={styles.borderedBox}>
                <div className={styles.leftHandleBox}>
                  <div className={styles.checkAllText}>
                    <div className={styles.checkbox}>
                      <Checkbox />
                    </div>
                    <span className={styles.text}>全选</span>
                  </div>
                  <div className={styles.handleText}>
                    删除选中商品
                  </div>
                  <div className={styles.handleText}>
                    移入收藏夹
                  </div>
                  <div className={styles.handleText}>
                    清理库存不足商品
                  </div>
                </div>
                <div className={styles.rightHandleBox}>
                  <div className={styles.goodsCountText}>
                    已选商品 <span className={styles.number}>3</span>件
                  </div>
                  <div className={styles.amountText}>
                    <span className={styles.text}>总价不含运费：</span>
                    <span className={styles.number}>￥1300.00</span>
                  </div>
                </div>
              </div>
              <button className={styles.settlementBtn}>
                结算
              </button>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
